<template>
  <div class="container">
    <div class="loginContainer">
      <div class="form" v-if="loginStatus === '账号登录'">
        <div class="title">FASCO</div>
        <div class="title">企业费控系统/EASYWAY</div>
        <el-form :model="Login" :rules="LoginRules" ref="LoginForm">
          <el-form-item prop="username">
            <el-input v-model="Login.username" placeholder="请输入用户名/Username"></el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input
              type="password"
              v-model="Login.password"
              show-password
              placeholder="请输入密码/Password"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button class="login_btn" @click="goLogin">登录/Log In</el-button>
          </el-form-item>
        </el-form>
        <el-divider content-position="center">其他/Other</el-divider>
        <p class="sms_btn">
          <i class="el-icon-chat-dot-square"></i>
          <a href="javascript:;" @click="loginsms('短信登录')">短信登录/Log In With SMS</a>
        </p>
        <p class="changepass_btn">
          <i class="el-icon-set-up"></i>
          <a href="javascript:;" @click="loginsms('修改密码')">修改密码/Change Password</a>
        </p>
      </div>
      <div class="form" v-else-if="loginStatus === '修改密码'">
        <div class="title">修改密码/Change Password</div>
        <el-form :model="ChangePassword" :rules="ChangePasswordRules" ref="ChangePasswordForm">
          <el-form-item prop="username">
            <el-input v-model="ChangePassword.username" placeholder="请输入用户名/Username"></el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input
              type="password"
              v-model="ChangePassword.password"
              show-password
              placeholder="请输入原密码/Original Pass"
            ></el-input>
          </el-form-item>
          <el-form-item class="novalid"></el-form-item>
          <el-form-item prop="newpass">
            <el-input
              type="password"
              v-model="ChangePassword.newpass"
              show-password
              placeholder="请输入新密码/New Password"
            ></el-input>
          </el-form-item>
          <el-form-item prop="reconfirm">
            <el-input
              type="password"
              v-model="ChangePassword.reconfirm"
              show-password
              placeholder="请确认新密码/Reconfirm"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button class="login_btn" @click="submitForm('ChangePasswordForm')">确认修改/Confirm</el-button>
            <div class="back">
              <a href="javascript:;" @click="loginsms('账号登录')">回到登录界面</a>
            </div>
          </el-form-item>
        </el-form>
      </div>
      <div class="form" v-else-if="loginStatus === '短信登录'">
        <div class="title">FASCO</div>
        <div class="title">企业费控系统/EASYWAY</div>
        <el-form :model="loginWithSMS" :rules="loginWithSMSRules" ref="loginWithSMSRef">
          <el-form-item prop="phoneno">
            <el-input v-model="loginWithSMS.phoneno" placeholder="请输入手机号/Mobile No."></el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-row :gutter="10">
              <el-col :span="16">
                <el-input v-model="loginWithSMS.vercode" placeholder="请输入验证码/Verification"></el-input>
              </el-col>
              <el-col :span="8">
                <el-button class="code_btn">
                  <span v-show="show" class="getcode" @click="receiveCode">获取验证码</span>
                  <span v-show="!show" class="count">{{count}}s后重新获取</span>
                </el-button>
              </el-col>
            </el-row>
          </el-form-item>
          <el-form-item>
            <el-button class="login_btn">登录/Log In</el-button>
          </el-form-item>
        </el-form>
        <el-divider content-position="center">其他/Other</el-divider>
        <p class="sms_btn">
          <i class="el-icon-user"></i>
          <a href="javascript:;" @click="loginsms('账号登录')">账号登录/Log In With Use</a>
        </p>
        <p class="changepass_btn">
          <i class="el-icon-set-up"></i>
          <a href="javascript:;" @click="loginsms('修改密码')">修改密码/Change Password</a>
        </p>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    var validatePass = (rule, value, callback) => {
      console.log(1);
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        if (this.ChangePassword.newpass !== "") {
          this.$refs.ChangePasswordForm.validateField("newpass");
        }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.ChangePassword.newpass) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    var checkphone = (rule, value, callback) => {
      // let phoneReg = /(^1[3|4|5|6|7|8|9]\d{9}$)|(^09\d{8}$)/;
      if (value == "") {
        callback(new Error("请输入手机号"));
      } else if (!this.isCellPhone(value)) {
        //引入methods中封装的检查手机格式的方法
        callback(new Error("请输入正确的手机号!"));
      } else {
        callback();
      }
    };
    return {
      Login: {
        username: "FASCO",
        password: "fasco123",
      },
      loginStatus: "账号登录",
      LoginRules: {
        username: [{ required: true, message: "请输入账号", trigger: "blur" }],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
      },
      ChangePassword: {
        username: "",
        password: "",
        newpass: "",
        reconfirm: "",
      },
      ChangePasswordRules: {
        username: [{ required: true, message: "请输入账号", trigger: "blur" }],
        password: [
          { required: true, message: "请输入原密码", trigger: "blur" },
        ],
        newpass: [{ required: true, message: "请输入新密码", trigger: "blur" }],
        reconfirm: [{ validator: validatePass2, trigger: "blur" }],
      },
      loginWithSMS: {
        phoneno: "",
        vercode: "",
      },
      loginWithSMSRules: {
        phoneno: [{ required: true, validator: checkphone, trigger: "blur" }], //validator: checkphone是验证手机的引入checkphone函数
      },
      show: true,
      count: "",
      timer: null,
    };
  },
  methods: {
    zz(e) {
      console.log(e.target.value);
      if (e.target.value.trim() == "") {
      }
    },
    backLogin() {
      this.loginStatus = 0;
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert("submit!");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    //检查手机号
    isCellPhone(val) {
      if (!/^1(3|4|5|6|7|8)\d{9}$/.test(val)) {
        return false;
      } else {
        return true;
      }
    },
    loginsms(num) {
      this.loginStatus = num;
    },
    receiveCode() {
      this.$refs.loginWithSMSRef.validateField("phoneno", (config) => {
        if (!config) {
          const TIME_COUNT = 60;
          if (!this.timer) {
            this.count = TIME_COUNT;
            this.show = false;
            this.timer = setInterval(() => {
              if (this.count > 0 && this.count <= TIME_COUNT) {
                this.count--;
              } else {
                this.show = true;
                clearInterval(this.timer);
                this.timer = null;
              }
            }, 1000);
          }
        }
      });
    },
    goLogin() {
      this.$refs.LoginForm.validate((config) => {
        if (!config) return;
        if (
          this.Login.username === "FASCO" &&
          this.Login.password === "fasco123"
        ) {
          const rLoading = this.$loading();
          sessionStorage.setItem("users", JSON.stringify(this.Login));
          
          setTimeout(()=>{
            rLoading.close();
            this.$router.push('/home')
          },500)
        } else {
          this.$message.error("账号密码错误");
        }
      });
    },
  },
  created() {},
  computed: {},
};
</script>
<style lang="less" scope>
.container {
  background: url(../assets/img/bgc1.jpg) no-repeat;
  background-size: 100% 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #212121;
  .loginContainer {
    padding: 50px 100px;
    box-sizing: border-box;
    width: 600px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 35px;
    .title {
      color: var(--themeColor);
      font-size: 28px;
      font-weight: 700;
    }
    .form {
      margin-bottom: 20px;
      .el-input__inner {
        height: 50px;
        border-radius: 10px;
        border: 1px solid #212121;
        background-color: transparent;
      }
      .novalid {
        margin: 0;
      }
      .login_btn {
        width: 100%;
        height: 50px;
        background: linear-gradient(
          180deg,
          rgba(32, 112, 188, 1) 0%,
          rgba(17, 70, 142, 1) 100%
        );
        border-radius: 10px;
        color: #fff;
      }
      .el-form {
        margin-top: 20px;
      }
    }
    .el-divider {
      background-color: #212121;
      position: relative;
      .el-divider__text {
        background-color: #f9fcfa;
      }
    }
    .back {
      text-align: right;
    }
    .code_btn {
      width: 100%;
      border: 1px solid #212121;
      height: 50px;
      background-color: transparent;
    }
    .sms_btn,
    .changepass_btn {
      text-align: left;
      font-size: 14px;
      margin: 10px auto;
      width: 230px;
      i {
        font-size: 28px;
        margin-right: 15px;
        position: relative;
        top: 6px;
      }
    }
  }
}
</style>